 #include('header.html', {title: '课程搜索'})

<style>
  .es-wrap {
    background-color: #fff;
  }
</style>
<div class="es-wrap">
  <div class="course-banner es-banner">
    <div class="container">
      <div class="title">
        <span>搜索</span>SEARCH
      </div>
    </div>
  </div>
  <div id="content-container" class="container">
    <div class="course-filter search-filter" id="course-filter">
      <div class="result-declare">
        共找到<span>{{page.totalRows}}</span>门与<span>“{{searchKey}}”</span>相关课程
      </div>
    </div>
    <!--课程列表-->
    <div class="course-list">
      <div v-if="page.totalRows <= 0" class="empty">没有搜到相关课程，请换个关键词试试！</div>
      <div v-else-if="page.totalRows > 0" class="row">
        <course-item v-for="c in page.rows" :course="c" :key="c.id"></course-item>
      </div>
    </div>
    <!--分页-->
    <div v-if="page.totalPages > 1" class="text-center">
      <navigation :pages="page.totalPages" :current.sync="page.pageNum"/>
    </div>
  </div>
</div>
<template id="course-item">
  <div class="course-card col-lg-3 col-md-4 col-xs-6">
    <div class="course-item">
      <div class="course-img">
        <a :href="'/course/'+course.id+'/info'">
          <img :src="course.cover" :alt="course.name" class="img-responsive">
        </a>
      </div>
      <div class="course-info">
        <div class="title">
          <a class="link-dark" :href="'/course/'+course.id+'/info'">
            {{course.name}}
          </a>
        </div>
        <div class="metas clearfix">
          <div class="i-course-time">
            <span class="txt">
              <span class="course-price-widget">
                <span style="color: #999;">{{course.time.substr(0, 10)}}</span>
              </span>
            </span>
          </div>
          <div class="i-course-metas">
            <span>
              <i class="es-icon es-icon-playcircleoutline"></i>{{course.students}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  var searchVm = new Vue({
    el: '.es-wrap',
    data: {
      page: {
        rows: [],
        pageNum: 1,
        totalPages: 0,
        totalRows: 0
      },
      searchKey: '${q}'
    },
    watch: {
      'page.pageNum': function (nv) {
        this.getPages();
      }
    },
    methods: {
      getPages: function () {
        var self = this;
        $.post('/course/api/search', {q: this.searchKey, page: self.page.pageNum}, function (data) {
          if (data.success) {
            self.page = data.payload;
          }
        });
      }
    },
    components: {
      'course-item': {
        props: ['course', 'type'],
        template: '#course-item'
      }
    },
    created: function () {
      this.getPages();
    }
  });
</script>
#include('footer.html')